<template>
  <view class="mobile-input">
    <view class="container">
      <view class="title text-white" v-text="title"></view>
      <view class="description text-grey" v-text="description"></view>
      <view class="mobile-box">
        <select class="select text-white" name="code" v-model="formData.code">
          <option :value="item" v-for="item in codeArr" :key="item" v-text="item"></option>
        </select>
        <view class="input-inner">
          <input type="number" placeholder="请输入手机号码" comfirm-type="done" placeholder-class="input-placeholder" maxlength="11" class="text-white" v-model="formData.mobile" />
          <view class="close-btn"><cu-icon v-if="formData.mobile" @click="onClean" size="42upx" name="close text-white" /></view>
        </view>
      </view>
      <view class="next-btn"><button class="cu-btn round text-white" :class="mobileError ? 'bg-grey' : 'bg-red'" @click="onNext" v-text="btnText"></button></view>
    </view>

    <slot></slot>
  </view>
</template>

<script>
import cuIcon from "@/vender/colorui/components/cuIcon.vue";
import { isMobileNumber } from "@/utils";

export default {
  components: { cuIcon },
  data() {
    return {
      mobileError: false,
      formData: {
        code: "+86",
        mobile: ""
      }
    };
  },
  props: {
    codeArr: {
      type: Array,
      default: () => ["+86"]
    },
    title: {
      type: String,
      default: "绑定手机号"
    },
    description: { type: String, default: "请输入您的手机号" },
    btnText: { type: String, default: "下一步" }
  },
  watch: {
    formData: {
      immediate: true,
      deep: true,
      handler(n, o) {
        this.mobileError = !isMobileNumber(n.mobile);
      }
    }
  },
  methods: {
    onClean(e) {
      this.$set(this.formData, "mobile", undefined);
    },
    onNext() {
      if (this.mobileError) {
        uni.showToast({
          title: "请输入正确的手机号",
          duration: 3000
        });
      } else {
        this.$emit("event-next", this.formData);
      }
    }
  }
};
</script>

<style lang="scss">
.mobile-input {
  background-image: url("~@/static/images/login/bg.jpg");
  background-repeat: round;
  background-size: 100%;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: center;

  .container {
    width: 70%;
    margin: 0 auto;
    //padding-top: 200upx;

    .title {
      font-size: 40upx;
    }

    .description {
      font-size: 24upx;
      line-height: 50upx;
    }

    .mobile-box {
      margin-top: 130upx;
      padding: 20upx 0;
      display: flex;
      align-items: center;
      justify-content: space-around;
      border-bottom: 1upx solid $uni-border-color;

      .select {
        font-size: 32upx;
        border: none;
        background: none;
        appearance: none;
        padding-right: 25upx;
      }

      .input-inner {
        display: flex;
        align-items: center;
        justify-content: space-around;

        .close-btn {
          width: 60upx;
        }
      }

      .input-placeholder {
        font-size: 30upx;
        color: #8799a3;
      }
    }
  }
  .next-btn {
    overflow: hidden;
    .cu-btn {
      float: right;
      margin-top: 200upx;
    }
  }
}
</style>
